<template>
    <div class="backBox">
        <div class="loginBox">
            <div class="logo">
                <img src="../../assets/image/logo.jpg" alt="" />
                <span>latuamodels.com</span>
            </div>
            <div class="loginText">
                <h1>Login</h1>
                <p>Please log in before you can do anything else</p>
            </div>
            <el-form :model="form" label-position="top" label-width="auto" style="width: 420px; margin-top: 20px">
                <el-form-item label="account">
                    <el-input :prefix-icon="User" v-model="form.account" />
                </el-form-item>
                <el-form-item label="password">
                    <el-input show-password :prefix-icon="Lock" type="password" v-model="form.password" />
                </el-form-item>
                <el-form-item>
                    <!-- <el-checkbox-group v-model="form.type">
                        <el-checkbox value="1" name="type"> 记住我 </el-checkbox>
                    </el-checkbox-group>
                    <p style="margin-left: 294px; color: gray" @click="$router.push('/forget')">
                        忘记密码
                    </p> -->
                </el-form-item>

                <el-form-item>
                    <el-button @click="login" style="width: 420px" type="primary">Login</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { User, Lock } from "@element-plus/icons-vue";

import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { loginAPI } from "@/apis/admin";
import { useUserStore } from "@/stores/userStore";

const router = useRouter();

const userStore=useUserStore()

const form = ref({
    account: "",
    password: "",
    type: "",
});

const login = async () => {

    const res = await loginAPI(form.value.account, form.value.password)

    if (res.data.code === 200) {

        ElMessage.success('Login successful')

        userStore.setUserInfo(res.data.data)

        setTimeout(() => {
            router.push('/manage')
        }, 2000)
    }
    else{
        ElMessage.error(res.data.msg)
    }


};
</script>

<style lang="scss" scoped>
.backBox {
    background: #f0f0f0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        width: 100px;
        border-radius: 50%;
        // border: 1px solid black;
    }

    .logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        span {
            margin-left: 20px;
            font-weight: bold;
            color: #35603c;
            font-size: 30px;
        }
    }

    .loginText {
        font-size: 12px;
        color: white;

        p {
            color: gray;
            margin-top: 10px;
        }
    }

    .loginBox {
        display: flex;
        flex-direction: column;
        background: white;

        padding: 40px;
    }

    .bottomText {
        display: flex;
        justify-content: center;

        span:nth-child(2) {
            // color: $primary-color;
            cursor: pointer;
        }
    }
}
</style>